<!--
 * @Descripttion: 
 * @version: 
 * @Author: -ViJia
 * @Date: 2022-03-22 11:37:08
 * @LastEditors: -ViJia
 * @LastEditTime: 2022-03-23 18:25:52
-->
<template>
  <div class="Main">
    <div class="MainTitle flex align-center justify-between">
      订单详情
      <el-button size="medium" type="primary" @click="DetailBack">
        返回
      </el-button>
    </div>
    <div class="MianContent" v-if="isHide">
      <div class="MainTopAction">
        <div class="mx-200 mb-20" style="flex: 1" v-if="info != ''">
          <a-steps :current="status" labelPlacement="vertical">
            <a-step title="待接单" :description="info.create_time" />
            <a-step title="待处理" :description="info.handle_time" />
            <a-step title="买家付款" :description="info.pay_time" />
            <a-step title="待设计" :description="info.start_time" />
            <a-step title="已完成" :description="info.complete_time" />
          </a-steps>
        </div>
      </div>
      <div
        v-if="info.status"
        class="flex py-50 mb-20 align-center justify-center"
        style="background: #f9f7f5"
      >
        <div class="flex align-center">
          <Icon type="clock-circle" style="font-size: 50px; color: #dda955" />
          <div class="ml-10">
            <div style="color: #000; font-size: 18px">
              订单状态：{{
                info.status == "0"
                  ? "已取消"
                  : info.status == "1"
                  ? "待接单"
                  : info.status == "2"
                  ? "待处理"
                  : info.status == "3"
                  ? "待付定金"
                  : info.status == "4"
                  ? "待设计"
                  : info.status == "5"
                  ? "已完成"
                  : "已关闭"
              }}
            </div>
            <!-- 订单状态(0已取消,1待接单,2待处理,3待付定金,4待设计,5已完成,6已关闭) -->

            <div v-if="info.status == '3'">买家已付款 请设计尽快设计</div>
          </div>
        </div>
      </div>
      <div class="mb-20" style="color: #000; font-size: 20px">详细信息</div>
      <div class="mb-20" style="width: 600px; background: #fff">
        <div class="flex align-center justify-between mb-10">
          <div>
            <span style="color: #999999">订单编号：</span>
            <span>{{ info.order_no }}</span>
          </div>
          <div>
            <span style="color: #999999">下单时间：</span>
            <span>{{ info.create_time }}</span>
          </div>
        </div>
        <div class="flex align-center justify-between mb-10">
          <div>
            <span style="color: #999999">客户姓名：</span>
            <span>{{ info.realname }}</span>
          </div>
          <div>
            <span style="color: #999999">手机号码：</span>
            <span>{{ info.phone }}</span>
          </div>
          <div>
            <span style="color: #999999">面积户型：</span>
            <span>{{ info.house_area }} m² </span>
            <span class="ml-10">{{ info.house_type }}</span>
          </div>
        </div>
        <div class="mb-10 flex align-center justify-between">
          <div class="flex align-center" style="flex: 1">
            <span style="color: #999999">收货信息：</span>
            <span style="flex: 1"
              >{{ info.province }} {{ info.city }} {{ info.area }}
              {{ info.address }} {{ info.name }} {{ info.mobile }}</span
            >
          </div>
          <!-- <span style="color: #DDA955;cursor: pointer;">复制</span> -->
        </div>
        <div class="flex align-center justify-between mb-10">
          <div>
            <span style="color: #999999">设计时间：</span>
            <span>{{ info.order_code }}</span>
          </div>
          <div>
            <!-- <span style="color: #999999;">下单时间：</span>
                        <span>{{info.nickname}}</span> -->
          </div>
        </div>
      </div>
      <div class="flex align-start mb-20">
        <span>设计诉求：</span>
        <el-input
          type="textarea"
          v-model="info.remark"
          placeholder="设计诉求"
          style="width: 600px"
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </div>
      <div
        class="mb-20"
        style="
          color: #000;
          font-size: 20px;
          border-bottom: 1px solid #cac7c7;
          padding-bottom: 8px;
        "
      >
        图纸/合同
      </div>
      <div class="mb-20">
        <div class="flex align-start mb-20">
          <span class="mr-20" style="font-size: 16px; color: #333">图纸</span>
          <div class="flex align-center">
            <img
              v-for="(item, index) in info.draw_thumb_url"
              :key="index"
              style="
                width: 120px;
                height: 120px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
              "
              :src="item.path"
            />
          </div>
        </div>
        <div class="flex align-start mb-20">
          <span class="mr-20" style="font-size: 16px; color: #333">合同</span>
          <div class="flex align-center">
            <img
              v-for="(item, index) in info.draw_thumb_url"
              :key="index"
              style="
                width: 120px;
                height: 120px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
              "
              :src="item.path"
            />
          </div>
        </div>
        <div class="flex align-start mb-20">
          <span class="mr-20" style="font-size: 16px; color: #333">选材单</span>
          <div class="flex align-center">
            <img
              v-for="(item, index) in info.material_thumb_url"
              :key="index"
              style="
                width: 120px;
                height: 120px;
                border-radius: 5px;
                overflow: hidden;
                margin-right: 10px;
              "
              :src="item.path"
            />
          </div>
        </div>
      </div>
      <div class="mb-20 flex align-center">
        <span class="mr-10" style="font-size: 16px; color: #333">合同价格</span>
        <el-input
          v-model="info.contract_price"
          style="width: 200px"
          placeholder=""
        />
      </div>
      <div class="mb-20 flex align-center">
        <div class="flex align-center mr-100">
          <span class="mr-10" style="font-size: 16px; color: #333"
            >支付次数</span
          >
          <el-input
            :value="info.pay_progress ? info.pay_progress.length : ''"
            style="width: 200px"
            placeholder=""
          />
        </div>
        <div class="flex align-center">
          <span class="mr-10" style="font-size: 16px; color: #333"
            >支付比例</span
          >
          <el-input
            v-model="info.pay_rule"
            style="width: 200px"
            placeholder=""
          />
        </div>
      </div>
      <div>
        <div
          v-for="(item, index) in info.pay_progress"
          :key="index"
          style="
            display: flex;
            align-items: center;
            margin-left: 24px;
            margin-bottom: 20px;
          "
        >
          <div
            style="
              width: 30px;
              height: 30px;
              background: #dda955;
              color: #fff;
              overflow: hidden;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              margin-right: 10px;
            "
          >
            1
          </div>
          <div>
            <span>{{ item.rate * 100 }}%</span>
            <span style="color: #999; margin-left: 10px"
              >(¥{{ item.amount }})</span
            >
          </div>
          <div style="color: #dda955; margin-left: 100px">
            {{
              item.pay_status == 0
                ? "发起收款"
                : item.pay_status == 1
                ? "待付款"
                : "已付款"
            }}
          </div>
        </div>
        <div class="flex align-center justify-between mb-20 ml-24">
          <div class="flex align-start" style="flex: 1">
            <span style="color: #999999; margin-right: 10px">备注</span>
            <el-input
              type="textarea"
              :value="info.pay_rule_desc"
              style="width: 600px"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from "vuex";
import Pagination from "@/common/pagination.vue";
import { OrderInfo } from "@/components/superSteward/Order/Columns/Order";
import Table from "ant-design-vue/lib/table";
import Icon from "ant-design-vue/lib/icon";
import "ant-design-vue/lib/table/style/css"; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件

export default {
  name: "list",
  components: {
    Pagination,
    Table,
    Icon,
  },
  data() {
    return {
      total: 0, //定义初始有多少条数据
      pageno: 1, //默认第几页
      pagesize: 10, //一页显示多少条数据
      listfields: OrderInfo, //表头列表
      listData: [], //表格数据
      status: "",
      info: "",
      isHide: true,
    };
  },
  computed: {
    ...mapState({
      // listfields: state => state.Operator.fields, //获取table头
    }),
  },
  created() {},
  mounted() {
    let that = this;
    let id = this.$route.query.id;
    // if (this.$route.query.back == 'OrderList') {
    that.GetOrderDetail(id);
    // } else {
    //     that.GetProductDetail(id)
    // }
  },
  methods: {
    ...mapActions({
      // GetFields: 'Operator/GetFields', //获取table头
    }),
    async GetOrderDetail(row) {
      let that = this;
      let params = {
        id: row,
      };
      const res = await that.$http.post(
        "/api/root/StewardOrder/getDesignerOrderDetail",
        params
      );
      if (res.code == "1") {
        const data = res.data;
        data["create_time"] = data.create_time
          ? that.$moment(data.create_time * 1000).format("YYYY-MM-DD  HH:mm:ss")
          : ""; //时间戳转换成时间
        data["handle_time"] = data.handle_time
          ? that.$moment(data.handle_time * 1000).format("YYYY-MM-DD  HH:mm:ss")
          : ""; //时间戳转换成时间
        data["pay_time"] = data.pay_time
          ? that.$moment(data.pay_time * 1000).format("YYYY-MM-DD  HH:mm:ss")
          : ""; //时间戳转换成时间
        data["start_time"] = data.start_time
          ? that.$moment(data.start_time * 1000).format("YYYY-MM-DD  HH:mm:ss")
          : ""; //时间戳转换成时间
        data["complete_time"] = data.complete_time
          ? that
              .$moment(data.complete_time * 1000)
              .format("YYYY-MM-DD  HH:mm:ss")
          : ""; //时间戳转换成时间
        that.info = data;
        that.status = data.status - 1;
        that.listData = data.product_list;
        setTimeout(() => {
          that.isHide = true;
        });
      }
    },
    DetailBack() {
      // let query = this.$route.query;
      // if (query.params) {
      //   this.$router.push({
      //     name: query.back,
      //     query: {
      //       choose_id: query.params.choose_id,
      //       steward_id: query.params.steward_id,
      //     },
      //   });
      // } else {
      //   this.$router.push({
      //     name: query.back,
      //   });
      // }
      this.$router.back(1)
    },
    //分页器
    handlePageChange(pageno, pagesize) {
      //点击第几页触发的函数
      this.pageno = pageno;
      this.pagesize = pagesize;
      this.GetList(); //这个是向后台请求的数据函数
    },
    //切换每页显示多少条
    onShowSizeChange(current, size) {
      //改变每页显示条目数的函数
      //pagesize 变化的回调
      this.pageno = current;
      this.pagesize = size;
      this.GetList(); //这个是向后台请求的数据函数
    },
  },
};
</script>

<style scoped lang="less">
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
</style>